<template>
  <view class="live-detail-container box-border">
    <view class="sticky z-10 top-0">
      <view class="w-[100%] h-[422rpx]">
        <video
          id="myVideo"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
          controls
          class="w-[100%] h-[100%]"
          poster="https://img1.baidu.com/it/u=261249861,1096372910&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500"
        ></video>
      </view>
      <view
        class="px-[30rpx] pt-[30rpx] flex flex-row items-start justify-between bg-white"
      >
        <view class="mr-[30rpx] text-[32rpx] text-[#222222]">
          当AI搜索结果一本正经瞎编时，你真的能分得清吗？
        </view>
        <view>
          <uni-icons type="redo-filled" size="28" color="#1E92F0"></uni-icons>
        </view>
      </view>
      <view class="bg-white">
        <view
          class="h-[110rpx] flex flex-row items-center justify-around relative"
        >
          <view
            class="tab-line bg-[#1E92F0] rounded-[3rpx] w-[42rpx] h-[8rpx]"
            :style="tabLineStyle"
          ></view>
          <template v-for="(item, index) in tabMenus" :key="index">
            <view
              :style="
                currentTab == item.id
                  ? 'color:#1E92F0;font-size: 32rpx;'
                  : 'color:#666666;font-size: 28rpx;'
              "
              @click="onChangeTab(item.id)"
              >{{ item.name }}</view
            >
          </template>
        </view>
      </view>
    </view>

    <view class="content bg-white">
      <liveIntroduce v-if="currentTab === 0"></liveIntroduce>
      <review v-if="currentTab === 1"></review>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import liveIntroduce from "./components/liveIntroduce.vue";
import review from "./components/review.vue";

const tabMenus = reactive([
  {
    id: 0,
    name: "简介",
  },
  {
    id: 1,
    name: "评论",
  },
]);
const currentTab = ref(0);
const tabLineStyle = ref("transform: translateX(-186rpx)");

// 初始化加载
onMounted(() => {});

const onChangeTab = (tabIndex: any) => {
  currentTab.value = tabIndex;
  if (tabIndex == 0) {
    tabLineStyle.value = "transform: translateX(-186rpx)";
  }
  if (tabIndex == 1) {
    tabLineStyle.value = "transform: translateX(186rpx)";
  }
};
</script>

<style lang="scss" scoped>
.live-detail-container {
  /* 留出底部安全区域 */
  padding-bottom: calc(
    0rpx + constant(safe-area-inset-bottom)
  ); /* iOS < 11.2 */
  padding-bottom: calc(0rpx + env(safe-area-inset-bottom)); /* iOS >= 11.2 */
  .tab-line {
    position: absolute;
    top: 75rpx;
    transition-property: color, -webkit-transform;
    transition-property: transform, color;
    transition-property: transform, color, -webkit-transform;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
  }
  .content {
    min-height: calc(100vh - 422rpx - 110rpx - 122rpx);
  }
}
</style>
